body {
  font-family: "Helvetica Neue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-weight: 300;
}

.table td { word-wrap: break-word; }

.cs-buttons { margin: 15px 0; }

.main {
	width: 100%;
	min-height: 100vh;
}

.fi-2 {
	flex: 1 0 45%;
	margin-right: 5px;
}

.fi-3 {
	flex: 1 0 30%;
	margin-right: 5px;
}

.fi-4 {
	flex: 1 0 20%;
	margin-right: 5px;
}

#sidebar-collapse {
	min-width:200px;
	max-width:200px;
}

#sidebar {
	overflow: hidden;
	z-index: 3;
}

#sidebar {
	background-color: #333;
	min-height: 100%;
}

#sidebar .list-group-item {
	border-radius: 0;
	background-color: #333;
	color: #ccc;
	border-left: 0;
	border-right: 0;
	border-color: #2c2c2c;
	white-space: nowrap;
	width: 100%;
}

/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
	background-color: #444;
}

/* open state */
#sidebar .list-group-item[aria-expanded="true"] {
	background-color: #222;
}


@media only screen and (max-width: 800px) {
	/* Force table to not be like tables anymore */
	table, 
	thead, 
	tbody, 
	th, 
	td, 
	tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	tr { border: 1px solid #ccc; }
 
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50% !important;
		white-space: normal;
		text-align:left;
	}
 
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	td:before { content: attr(data-title); }
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}